<template>
  <div style="display: flex; justify-content: end; margin-bottom: 6px">
    <a-input-search
      allowClear
      v-model:value="pageSet.name"
      placeholder="请输等级名称"
      enter-button
      @search="loadPagination(true)"
      style="width: 300px"
    />
  </div>
  <a-table
    size="small"
    :loading="tableLoading"
    :dataSource="tableData"
    :columns="columns"
    bordered
    :pagination="false"
    row-key="id"
    :preserveSelectedRowKeys="true"
    :row-selection="{
      selectedRowKeys: selectedRowKeysList,
      onChange: onSelectChange,
      preserveSelectedRowKeys: true
    }"
    :scroll="{x: 700, y: 500}"
  >
    <template #bodyCell="{text, record, index, column}">
      <template v-if="column.title == '等级图标'">
        <div
          class="pointer"
          v-if="text"
          @click="
            () => {
              setVisible(true, index);
            }
          "
        >
          <img :src="text" alt="" style="height: 30px" />
          <a-image
            :width="0"
            :style="{display: 'none'}"
            :preview="{
              visible: visibleImg[index],
              onVisibleChange: (e) => {
                setVisible(e, index);
              }
            }"
            :src="text"
          />
        </div>
      </template>
    </template>
  </a-table>
  <Pagination
    :pageSet="pageSet"
    style="margin-top: 10px"
    :loadPagination="loadPagination"
  ></Pagination>
</template>

<script lang="ts" setup>
import {ref, computed} from "vue";
import Pagination from "@/components/pagination/Pagination.vue";
import {userLevelPage} from "@/api/customerArchives/userGrade";
const tableData = ref<Array<any>>([]);
const tableLoading = ref<boolean>(false);
const props = defineProps({
  list: {
    type: Array,
    default: []
  },
  data: {
    type: Object,
    default: {}
  }
});
const visibleImg = ref<any>([]);
const setVisible = (flag, index) => {
  visibleImg.value[index] = flag;
};
const emits = defineEmits(["update:list"]);
const pageSet = ref<any>({
  pageNo: 1,
  pageSize: 20,
  total: 0,
  publishStatus: 1
});
const columns = ref<Array<object>>([
  {
    title: "序号",
    dataIndex: "name",
    align: "center",
    width: 50,
    customRender: ({index}) => {
      return index + 1;
    },
    fixed: "left"
  },
  {
    title: "等级名称",
    dataIndex: "name",
    align: "center",
    width: 180
  },
  // {
  //   title: "等级图标",
  //   dataIndex: "icon",
  //   align: "center",
  //   width: 120
  // },
  {
    title: "会员等级",
    dataIndex: "lv",
    align: "center",
    width: 120
  },
  {
    title: "享受折扣",
    dataIndex: "discount",
    align: "center",
    width: 120
  },
  {
    title: "有效时间",
    dataIndex: "expDay",
    align: "center",
    width: 120
  }
]);
const loadPagination = (flag: boolean = false): void => {
  if (flag) {
    pageSet.value.pageNo = 1;
  }
  tableLoading.value = true;
  userLevelPage(pageSet.value)
    .then((res) => {
      tableData.value = res.data.rows;
      pageSet.value.total = res.data.totalRows;
    })
    .finally(() => {
      tableLoading.value = false;
    });
};
loadPagination(true);
const selectedRowKeysList = computed({
  get() {
    return props.list;
  },
  set(value) {
    emits("update:list", value);
  }
});
function onSelectChange(selectedRowKeys) {
  selectedRowKeysList.value = selectedRowKeys;
}
</script>

<style lang="less" scoped></style>
